<template>
    <page-view :title="false">
        <div slot="headerContent" style="display: flex;align-items: center;">
            <div class="avatar">
                <a-avatar size="large" :src="avatar" />
            </div>
            <div>
                <div class="title">{{ timeFix }}，{{ username }}<span class="welcome-text">，{{ welcome }}</span></div>
                <div style="margin-bottom: 6px">AI数字人-管理后台 </div>
            </div>
        </div>
        <div slot="extra" style="min-width: 260px;">
            <a-row class="more-info">
                <a-col :span="20">
                    <!-- <head-info title="本站运行" :content="runningTime" :center="false" :bordered="false" /> -->
                </a-col>
            </a-row>
        </div>
        <div style="background: #fff;padding: 20px;">
            <div class="DataBox flex">
                <h2>当天数据</h2>
                <div class="list">
                     <a-row :gutter="16" style="margin-bottom:20px;">
                        <a-col :span="6">
                            <a-card title="新注册用户数" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{dayData.member_num?dayData.member_num:0}}</p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card title="今天共消耗点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{dayData.reduce_point?dayData.reduce_point:0}}</p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card title="新增充值点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{dayData.add_point?dayData.add_point:0}}</p>
                            </a-card>
                        </a-col>
                    </a-row>
                     <a-row :gutter="16">
                        <a-col :span="6">
                            <a-card title="消耗音频点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{dayData.voice_point?dayData.voice_point:0}}</p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card title="消耗视频点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{dayData.video_point?dayData.video_point:0}}</p>
                            </a-card>
                        </a-col>
                    </a-row>
                </div>
            </div>
            <div class="DataBox flex" style="margin-top: 30px;">
                <h2>历史数据</h2>
                <div class="list">
                     <a-row :gutter="16" style="margin-bottom:20px;">
                        <a-col :span="6">
                            <a-card title="共充值点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{historyData.add_point?historyData.add_point:0}}</p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card title="已消耗点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{historyData.reduce_point?historyData.reduce_point:0}}</p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card title="注册用户数" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{historyData.member_num?historyData.member_num:0}}</p>
                            </a-card>
                        </a-col>
                    </a-row>
                     <a-row :gutter="16">
                        <a-col :span="6">
                            <a-card title="消耗音频点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{historyData.voice_point?historyData.voice_point:0}}</p>
                            </a-card>
                        </a-col>
                        <a-col :span="6">
                            <a-card title="消耗视频点" style="font-size:20px;" size="small" :bordered="true">
                            <p>{{historyData.video_point?historyData.video_point:0}}</p>
                            </a-card>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </div>
    </page-view>
</template>
<script>
    import Vue from 'vue';
    import { PageView } from '@/layouts';
    import { timeFix } from '@/utils/util';
    import { ACCESS_TOKEN, USER_DATA } from '@/store/mutation-types';
    import { mapGetters, mapState, mapActions } from 'vuex';
    import HeadInfo from '@/components/tools/HeadInfo';
    import { AdminDataAll } from '@/api/api';
    export default {
        name: 'Workplace',
        components: {
            PageView,
            HeadInfo,
        },
        data() {
            return {
                timeFix: timeFix(),
                time: Date.parse(new Date()),
                loading: false,
                runningTime: 0,
                currentPage: 1, //当前页码
                total: 0, //定义初始有多少条数据
                pageno: 1, //默认第几页
                pagesize: 7, //一页显示多少条数据
                listData: [], //表格数据

                dayData:{}, //当天数据
                historyData:{}, // 历史数据
            };

        },
        filters: {
            formatDate: function(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            }
        },
        computed: {
            ...mapState({}),
            username() {
                const user = Vue.ls.get(USER_DATA);
                return user.name
            },
            avatar() {
                const user = Vue.ls.get(USER_DATA);
                return user.headimg
            },
            welcome() {
                const arr = ['休息一会儿吧', '欢迎你回来', '今天也是元气满满的一天哦', '我猜你可能累了', ]
                const index = Math.floor(Math.random() * arr.length)
                return arr[index]
            }
        },
        created() {
            this.running();
            this.AdminDataAll()
        },
        mounted() {
          
        },
        methods: {

            ...mapActions({}),
            running() {
                const that = this
                let startTime = new Date('2022/3/22 11:27:00');
                let timer = setInterval(() => {
                    let time = new Date() - startTime;
                    let day = parseInt(time / 1000 / 60 / 60 / 24, 10);
                    let hour = parseInt(time / 1000 / 60 / 60 % 24, 10);
                    let minute = parseInt(time / 1000 / 60 % 60, 10);
                    let second = parseInt(time / 1000 % 60, 10);
                    that.runningTime = `${day}天${hour}小时${minute}分${second}秒`;
                }, 1000);
            },


            //获取汇总数据
            async AdminDataAll(){
                const that = this;
                let res = await AdminDataAll()
                if(res.data.code == 200){
                    let data = res.data.data;
                    that.dayData = data.day;
                    that.historyData = data.history;
                }
            }
        },
    };
</script>
<style lang="less" scoped>
    .DataBox{
        h2{
            flex-shrink: 0;
        }
        .list{
            width: 100%;
            padding: 50px 0 0 30px;
        }
    }
</style>